<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">动画-> 文档请参考：
          <a href="http://www.layui.com/doc/element/anim.html" target="_blank">
            <span>http://www.layui.com/doc/element/anim.html</span>
          </a>
        </div>
        <div class="layui-card-body">

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>动画过程演示</legend>
          </fieldset>

          <ul class="site-doc-icon">
            <li>
              <div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
              <div class="code">layui-anim-up</div>
            </li>
            <li>
              <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
              <div class="code">layui-anim-upbit</div>
            </li>
            <li>
              <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
              <div class="code">layui-anim-scale</div>
            </li>
            <li>
              <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
              <div class="code">layui-anim-scaleSpring</div>
            </li>
          </ul>
          <ul class="site-doc-icon">
            <li>
              <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
              <div class="code">layui-anim-fadein</div>
            </li>
            <li>
              <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
              <div class="code">layui-anim-fadeout</div>
            </li>
            <li>
              <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
              <div class="code">layui-anim-rotate</div>
            </li>
            <li>
              <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
              <div class="code">追加：layui-anim-loop</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
  layui.use('jquery', function() {
    var $ = layui.jquery;

    $('[data-anim]').each(function() {
      var _that = $(this);
      _that.on('click', function() {
        _that.addClass(_that.data('anim'));
      });
    });

  });
</script>

<style scoped>
  .site-doc-icon {
    margin-bottom: 50px;
    font-size: 0;
  }
  
  .site-doc-icon li {
    display: inline-block;
    vertical-align: middle;
    width: 127px;
    line-height: 25px;
    padding: 20px 0;
    margin-right: -1px;
    margin-bottom: -1px;
    border: 1px solid #e2e2e2;
    font-size: 14px;
    text-align: center;
    color: #666;
    transition: all .3s;
    -webkit-transition: all .3s;
  }
  
  .site-doc-icon li {
    width: 222px;
  }
  
  .site-doc-icon li .layui-anim {
    width: 150px;
    height: 150px;
    line-height: 150px;
    margin: 0 auto 10px;
    text-align: center;
    background-color: #009688;
    cursor: pointer;
    color: #fff;
    border-radius: 50%;
  }
</style>